<template>
    <div class="login">
      <el-row>
        <!--Element Plus 布局默认将整体分为24格，我们这个页面用一半-->
        <!--:xs的作用： 左侧占位符当页面宽度小于一定程度时会消失，表单会占满-->
        <el-col :span="12" :xs="0"></el-col>
        <el-col :span="12" :xs="20">
          <!--这里放置表单组件-->
          <el-form class="login_form">
            <h1>Hello</h1>
            <h3>欢迎来到硅谷甄选</h3>
            <el-form-item>
              <el-input :prefix-icon="User" placeholder="账户" type="text" v-model="user.username"></el-input>
            </el-form-item>
          <el-form-item>
            <el-input :prefix-icon="Lock" placeholder="密码" type="password" show-password v-model="user.password"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" size="default" class="login_btn" @click="login">登录</el-button>
          </el-form-item>
          </el-form>
        </el-col>
      </el-row>
    </div>
</template>

<script setup lang="ts" name="Login">
import {ref} from 'vue'
import { useRouter } from 'vue-router';
import { Lock } from '@element-plus/icons-vue';
import { User } from '@element-plus/icons-vue';
import {storeToRefs} from 'pinia'
import useUserStore from '../../stores/modules/user';
import axios from 'axios';

let router = useRouter()
let useStore = useUserStore()
let token = ref<String>()

const {user} = storeToRefs(useStore)

const login = () => {
  axios({
    //url: 'http://116.62.221.163:8082/common/login',
    url: 'http://127.0.0.1:4523/m1/5379113-5051715-default/login',
    method: 'POST',
    data: {
       username: user.value.username,
       password: user.value.password
    }
  }).then((response) => {
      console.log(response)
      token.value = response.data.token
      if(token.value != ''){
         router.push("/layout")
      }
  })
  //通知仓库发登录请求
  //如果请求成功，则跳转到首页
  //如果请求失败，则弹出警告信息
  //useStore.userLogin(user.value)
}
</script>

<style scoped lang="scss">
.login{
  width: 100%;
  height: 100vh;
  background: url('../../assets/images/background.jpg') no-repeat;
  background-size: cover;
  .login_form{
    position: relative;
    width: 85%;
    top: 30vh;
    background: url('../../assets/images/login_form.png');
    background-size: cover;
    color: white;
    padding: 40px;
    h3{
      margin: 20px 0px;
    }
    .login_btn{
      width: 100%;
    }
  }
}
</style>